<template>
	<view class="alert-box">
		<text class="alert-title">{{params.title}}</text>
		<text class="alert-desc">{{params.desc}}</text>
		<view class="alert-button-box">
			<view class="alert-button-item-border" :class="{'alert-button-item-bg':item != '取消'}"
			v-for="(item,index) in params.buttons" 
			:key="index"
			@tap="buttonClick(item)">{{item}}</view>
		</view>
	</view>
</template>

<script setup>
	const emits = defineEmits(['close','submit'])
	defineProps({
		params:{
			type:Object,
			default:()=>{
				return {
					title:'商户认证',
					desc:'商户未认证，请进行认证！',
					buttons:['取消','确认']
				}
			}
		}
	})
	const buttonClick = (value)=>{
		if (value == '取消') {
			emits('close')
		}
		else{
			emits('submit',value)
		}
	}
</script>

<style lang="scss" scoped>
	.alert-box {
		width: 520rpx;
		padding: 50rpx;
		background-color: white;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;
		color: $xh-title-color;
		.alert-title{
			font-size: 36rpx;
			font-weight: 500;
		}
		.alert-desc{
			font-size: 28rpx;
			margin-top: 40rpx;
		}
		.alert-button-box{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			width: 100%;
			margin-top: 50rpx;
			.alert-button-item-border{
				height: 70rpx;
				line-height: 70rpx;
				flex: 1;
				border-radius: 35rpx;
				border: 1px solid $xh-theme-color;
				color: $xh-theme-color;
				text-align: center;
				box-sizing: border-box;
			}
			.alert-button-item-bg{
				margin-left: 32rpx;
				height: 70rpx;
				line-height: 70rpx;
				flex: 1;
				background-color: $xh-theme-color;
				border-radius: 35rpx;
				color: white;
				text-align: center;
				box-sizing: border-box;
			}
		}
	}
</style>